<template>
  <div id="app">
    <!-- 顶部欢迎栏 -->
    <div class="top-bar">
      <div>欢迎您的访问！今天是：{{ currentDate }}</div>
      <div>
        <a href="#">学校主页</a> |
        <a href="#">管理入口</a>
      </div>
    </div>
    
    <!-- 学校标识区 -->
    <div class="school-header">
      <div class="school-logo">
        <img src="@/assets/emblemAndbadge/金山logo(1).png" alt="福建农林大学金山学院校徽">
        <div class="school-name">福建农林大学金山学院</div>
      </div>
      <div class="school-motto">
        厚德博学 笃行致远
      </div>
    </div>
    
    <!-- 成就展示条 -->
    <div class="achievements-bar">
      福建农林大学 • ESI学科排名居全国"双非"农林高校首位 • CNS三大顶刊第一作者单位十年14篇 居全国高校第31位 • 全国重点实验室2个 • 院士2名 • 校友会排名95 林科125 U.S.News排名全球高校749
    </div>
    
    <!-- 主导航菜单 -->
    <nav class="main-nav">
      <router-link to="/">首页</router-link>
      <router-link to="/about">学院概况</router-link>
      <a href="https://jsxy.fafu.edu.cn/xbszx/list.htm" target="_blank">机构设置</a>
      <a href="https://jsxy.fafu.edu.cn/dwgzb/main.htm" target="_blank">党建工作</a>
      <a href="https://jsxy.fafu.edu.cn/xsgz/list.htm" target="_blank">学生工作</a>
      <a href="https://jsxy.fafu.edu.cn/jsjxgzb/main.htm" target="_blank">教育教学</a>
      <router-link to="/ranking-intro">金山牛人榜</router-link>
      <router-link to="#">OA系统</router-link>
    </nav>
    
    <!-- 主内容区 -->
    <router-view/>
    
    <!-- 免责声明 -->
    <div class="disclaimer">
      <h3>免责声明</h3>
      <p>本网站仅为课程项目作业，模拟学校官方网站布局和功能，用于展示学生信息。网站内容、图片和信息仅供教学演示使用，不代表福建农林大学金山学院官方立场和观点。网站展示的学生信息和成就为模拟数据，不作为官方认证依据。如有侵权，请联系我们删除。</p>
      <p>© 2025 金山学院牛人榜项目 - 计算机专业学生作品</p>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
      <div class="footer-content">
        <div class="footer-left">
          <img src="@/assets/emblemAndbadge/红色院徽.jpg" alt="金山学院红色院徽" class="footer-logo">
          <img src="https://jsxy.fafu.edu.cn/_upload/tpl/04/33/1075/template1075/images/flogo.png" alt="福建农林大学金山学院" class="footer-text-image">
        </div>
        
        <div class="footer-center">
          <span class="location-icon">📍</span>
          <span>福建省福州市仓山区上下店路15号（350002）</span>
        </div>
      </div>
      
      <div class="footer-right">
        <img src="https://jsxy.fafu.edu.cn/_upload/tpl/04/33/1075/template1075/images/weixin.png" alt="金山学院官方微信" class="qrcode">
        <div class="qrcode-text">
          金山学院<br>官方微信
        </div>
      </div>
    </div>
    
    <!-- 全局音效控制 -->
    <SoundControl />
  </div>
</template>

<script>
import SoundControl from '@/components/SoundControl.vue';
import soundManager from '@/utils/SoundManager';

export default {
  name: 'App',
  components: {
    SoundControl
  },
  data() {
    return {
      currentDate: ''
    }
  },
  mounted() {
    this.updateDate();
    
    // 初始化音效系统
    soundManager.init();
    
    // 检测音效文件
    this.checkAudioFiles();
  },
  methods: {
    updateDate() {
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
    },
    checkAudioFiles() {
      // 检测音效文件是否为占位符
      const testAudio = new Audio('/sounds/reveal.mp3');
      testAudio.addEventListener('error', () => {
        // 如果加载出错，显示提示
        soundManager.showAudioMissingAlert();
      });
      
      // 如果文件小于1KB，可能是占位符
      fetch('/sounds/reveal.mp3')
        .then(response => {
          const contentLength = response.headers.get('content-length');
          if (contentLength && parseInt(contentLength) < 1000) {
            soundManager.showAudioMissingAlert();
          }
        })
        .catch(() => {
          // 如果无法获取文件，显示提示
          soundManager.showAudioMissingAlert();
        });
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 顶部欢迎栏 */
.top-bar {
  background-color: #c22;
  color: white;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
}

.top-bar a {
  color: white;
  text-decoration: none;
  margin-left: 15px;
}

/* 学校标识区 */
.school-header {
  background-color: #f9f0e6;
  padding: 20px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.school-logo {
  display: flex;
  align-items: center;
}

.school-logo img {
  height: 80px;
}

.school-name {
  margin-left: 20px;
  color: #2779aa;
  font-size: 32px;
}

.school-motto {
  color: #c22;
  font-size: 24px;
  font-weight: bold;
}

/* 成就展示条 */
.achievements-bar {
  background-color: #570d0d;
  color: white;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
}

/* 主导航菜单 */
.main-nav {
  background-color: #c22;
  display: flex;
  justify-content: center;
}

.main-nav a {
  color: white;
  text-decoration: none;
  padding: 12px 30px;
  font-size: 16px;
  display: block;
}

.main-nav a:hover,
.main-nav a.router-link-active {
  background-color: #a00;
}

/* 免责声明 */
.disclaimer {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 20px;
}

.disclaimer h3 {
  color: #333;
  margin-bottom: 10px;
}

.disclaimer p {
  margin-top: 5px;
}

/* 页脚 */
.footer {
  background-color: #c22;
  color: white;
  padding: 10px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.footer-left {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.footer-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: white;
  border-radius: 5px;
  padding: 5px;
}

.footer-text-image {
  height: 40px;
  width: 450px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-left: 20px;
}

.footer-center {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.location-icon {
  margin-right: 8px;
  font-size: 18px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background-color: white;
  border-radius: 5px;
  padding: 3px;
}

.qrcode-text {
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
  line-height: 1.2;
}
</style>
